<template>
  <div class="app-container">
    <!-- 头部区域 -->
    <Header title="购物车案例"></Header>
    <!-- 主体区域 -->
    <Goods v-for="item in goodsList" :key="item.id" :id="item.id" :state="item.goods_state" :pic="item.goods_img" :goodsName="item.goods_name" :price="item.goods_price" :count="item.goods_count" @state-change="getNewState">
      <Counter :num="item.goods_count" @num-change="getNewNum(item, $event)"></Counter>
    </Goods>
    <Footer :allChecked="fullState" :totalPrice="totalPrice" :totalCount="totalCount" @fullState-change="getNewFullState"></Footer>
  </div>
</template>

<script>
// 导入axios请求库
import axios from 'axios'
// 导入eventBus
import bus from '@/eventBus.js'
// 导入组件
import Header from '@/components/Header/Header.vue'
import Goods from '@/components/Goods/Goods.vue'
import Footer from '@/components/Footer/Footer.vue'
import Counter from '@/components/Counter/Counter.vue'

export default {
  components: {
    Header,
    Goods,
    Footer,
    Counter
  },
  created() {
    // 调用接口获取数据
    this.initCartList()

    // 插槽改造
    // 接收Counter组件传递过来的值 { id, value }，修改对应商品的数量
    // bus.$on('num-change', val => {
    //   this.goodsList.some(item => {
    //     if (item.id === val.id) {
    //       item.goods_count = val.value
    //       return true
    //     }
    //   })
    // })
  },
  computed: {
    // 动态计算出全选的状态是 true 还是 false
    fullState() {
      return this.goodsList.every(item => item.goods_state)
    },
    // 动态计算出当前购物车的商品总价
    // 先过滤出选中的商品，再计算总价
    totalPrice() {
      return this.goodsList.filter(item => item.goods_state)
      .reduce((amt, item) => amt + item.goods_price * item.goods_count, 0)
    },
    // 动态计算商品的总数
    totalCount() {
      return this.goodsList.filter(item => item.goods_state)
      .reduce((sum, item) => sum += item.goods_count, 0)
    }
  },
  data() {
    return {
      goodsList: [],
    }
  },
  methods: {
    // 获取商品列表
    async initCartList() {
      const { data: res } = await axios.get('https://www.escook.cn/api/cart')
      if (res.status === 200) {
        this.goodsList = res.list
      }
    },
    // 接收Goods子组件传递过来的数据，修改父组件中商品的状态，用e作为形参，显得高大上
    // e的格式为（id, newState）
    getNewState(e) {
      // some()方法查找元素，并对对应的元素做修改，修改后return终止循环
      this.goodsList.some(item => {
        if (item.id === e.id) {
          item.goods_state = e.newState
          return true
        }
      })
    },
    // 接收Footer子组件传递过来的数据，根据传递的全选状态的数据来修改所有商品的选中状态
    // val的值就等于全选状态的值
    getNewFullState(val) {
      this.goodsList.forEach(item => item.goods_state = val)
    },

    // 插槽改造
    getNewNum(item, e) {
      item.goods_count = e
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
